<!--
*@Author: QWP
*@Description: 下拉菜单
*@Date: 2023-06-29 17:13:10
-->
<template>
  <a-dropdown :type="$attrs['type'] || 'primary'"
    v-bind="$attrs">
    <u-icon-button v-bind="$attrs.buttonProps">
      <slot></slot>  
    </u-icon-button>
    <template #overlay>
      <a-menu>
        <a-menu-item v-for="item in data" 
          :key="item"
          @click="itemClick(item)">
          {{ typeof item == 'string' ? item : item[fieldNames['label']] }}
        </a-menu-item>
      </a-menu>
    </template>
    <slot></slot>
  </a-dropdown>
</template>

<script lang='ts' setup>
import { ref, reactive } from 'vue' 
defineOptions({
  name: 'u-dropdown'
})

interface IProps {
  label: string,
  value: string
}

const props = withDefaults(
  defineProps<{
    data: any[],
    fieldNames?: IProps
  }>(),
  {
    fieldNames: { label: 'label', value: 'value' }
  }
)
const emits = defineEmits(['click'])

const itemClick = (data) => {
  const { label, value } = props.fieldNames
  typeof data == 'string' ? emits('click', data) :  emits('click', data[value], data)
}

const itemType = (item) => {
  return typeof item == 'string' ? item : item[props.fieldNames['label']]
}

</script>

<style lang='scss' scoped>
</style>